<template>
  <view class="content">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
      <defs>
        <linearGradient id="bg">
          <stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop>
          <stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop>
          <stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop>
        </linearGradient>
        <path id="wave" fill="url(#bg)"
          d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
          s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
      </defs>
      <g>
        <use xlink:href='#wave' opacity=".3">
          <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="10s"
            calcMode="spline" values="270 230; -334 180; 270 230" keyTimes="0; .5; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        </use>
        <use xlink:href='#wave' opacity=".6">
          <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="8s"
            calcMode="spline" values="-270 230;243 220;-270 230" keyTimes="0; .6; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        </use>
        <use xlink:href='#wave' opacty=".9">
          <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s"
            calcMode="spline" values="0 230;-140 200;0 230" keyTimes="0; .4; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0" repeatCount="indefinite" />
        </use>
      </g>
    </svg>
    
    <view class="loginBox">
  
	  <text  style="text-align: center;color: #f00;margin-left: 120px;">{{notice}}</text>
      <view class="inputBox">
        <view class="ipt">
        
           <uni-data-select
               v-model="value"
               :localdata="range"
               @change="change"
             ></uni-data-select>
		 
        </view>
        <view > &nbsp;</view> 
		<view > &nbsp;</view> 
		<view > &nbsp;</view> 
       <!-- <view class="ipt">
          <uni-icons type="checkmarkempty" size="24" color="rgb(66,157,250)"></uni-icons>
          <input type="text" value="" placeholder="请输入验证码"/>
          <view class="yzm">
            验证码
          </view>
        </view> -->
        <button @click="login()">下一步</button>
        
      </view>
	  
	  
     <!-- <view class="tipbox">
        <view class="txt">
          —— 其他账号登录 ——
        </view>
        <view class="otherUser">
          <uni-icons type="qq" size="40" color="rgb(66,157,250)"></uni-icons>
          <uni-icons type="weixin" size="40" color="rgb(2,187,17)"></uni-icons>
        </view>
      </view> -->
	  
	
		
	
    </view>
  </view>
  
  <view>
  	<!-- 普通弹窗 -->
  	<uni-popup ref="popup" border-radius="50px 50px 50px 50px"  :mask-click="false"  background-color="#fff"    @change="change">
  		<view  style="padding: 10px 10px;">
  			<h4 style="font-size: 20px;">服务条款和隐私协议</h4> 
  			<div> 已阅读并同意<a href="javascript:;" @click="goAgreement('1805793898451169280')" >《用户协议》</a>和<a href="javascript:;" @click="goAgreement('1805869116850958336')">《隐私协议》</a></div>
  			<div style="margin: 0 auth;text-align: center;">
  						
  					<button style=transform:scale(0.7) type="default"  size="mini"  plain="true" @click="reject">拒绝</button>
  					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  					<button style=transform:scale(0.7) type="primary"  size="mini"   plain="true" @click="agree">同意</button>
  			
  		
  		</div>	
  		</view>
  	</uni-popup>
  </view>
</template>

<script>
import constant from '@/store/constant.js'
	const baseUrl=constant.baseUrl;
	export default {
		data() {
			return {
				title: '尊敬的用户,请登录',
				showPassword: true,
				src: '../../../static/eye-1.png',
				userName:"",
				pwd:"",
				notice:"",
				checked:false,
				value: 1,
				      range: [
				        { value: 0, text: "选择找回密码方式" },
				        { value: 1, text: "邮箱找回" },
				        { value: 2, text: "安全问题找回" },
				      ],
			}
		},
		onLoad() {
			console.log("init")
		},
		methods: {
			reject:function(){
				this.$refs.popup.close()
			},
			agree:function(){
				this.$refs.popup.close();
				this.$data.checked=true;
			},
			goAgreement:function(id){
				uni.navigateTo({
					url:"/pages/login/agreement?id="+id
				})
			},
			changePassword: function() {
                this.showPassword = !this.showPassword;
            },
			changeValue:function(value){
				console.log(111)
				this.$data.checked=true;
			},
			login:function(){
				this.$data.notice="";
				
				if(!this.$data.checked){
					
					this.$refs.popup.open("center")
					return false;
				}
				
				
				if(this.$data.userName.length!=11){
					this.$data.notice="手机号格式不正确";
					return false;
				}
				if(this.$data.pwd.length==0){
					this.$data.notice="密码不可以为空";
					return false;
				}
				uni.request({
					// url:"http://192.168.1.4:9000/api/user/login",
					url:baseUrl+"/api/user/login",
					method:"POST",
					data:{userName:this.$data.userName,pwd:this.$data.pwd},
					success: (res) => {
						console.log(res);
					        if(res.data.code==0){
					        
								console.log(JSON.stringify(res.data.result))
					        	uni.setStorageSync('authInfo', JSON.stringify(res.data.result));
								uni.setStorageSync('token', res.data.result.token);
								constant.authInfo=res.data.result;
					        	uni.switchTab({
					        		url:"/pages/home/home"
					        	})
					        	
					        }else{
					        	this.$data.notice=res.data.message;
					        }
					},
					fail:function(err){
						console.log(err)
					}
				})
				console.log(this.$data.userName)
				console.log(this.$data.pwd);
			},
			reg:function(){
				uni.redirectTo({
					url:"/pages/register/register"
				})
			},
		}
	}
</script>

<style scoped>
  svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height:100%;
    box-sizing: border-box;
    display: block;
    background-color: #ffffff;
  }
  
  .loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    width: 90%;
    border-radius: 20rpx;
    padding: 60rpx;
    box-sizing: border-box;
	
  }
  h3{
    color:rgb(66,157,250);
    font-size: 40rpx;
    letter-spacing: 10rpx;
    margin-bottom: 40rpx;
  }
  .inputBox{
    
  }
  .ipt{
    height: 86rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding-left: 10rpx;
  }
  .ipt1{
    height: 60rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 40rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding-left: 10rpx;
	
  }
  .ipt input{
    margin-left: 20rpx;
    font-size: 28rpx;
  }
  .ipt input{
    margin-left: 20rpx;
  }
  .forgetPwd{
    margin-top: 30rpx;
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
    padding:0 10rpx;
    display: flex;
    justify-content: space-between;
  }
  button{
    margin-top: 20rpx;
    line-height: 85rpx;
    text-align: center;
    background: rgb(66,157,250);
    border-radius: 40rpx;
    color: #fff;
    margin-top: 40rpx;
  }
  
  .tip{
    text-align: center;
    font-size: 28rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #f4f4f4;
  }
  .tipbox {
    text-align: center;
    margin-top: 100rpx;
  }
  
  .otherUser {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
  }
  
  .txt {
    font-size: 28rpx;
    color: #cbcbcb;
  }
  
  .otherUser .uni-icons {
    margin-left: 20rpx;
  }
  .yzm{
    text-align: end;
    font-size: 24rpx;
    background: linear-gradient(to right,rgb(66,157,250),rgb(0, 170, 127));
    height: 60rpx;
    width: 150rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 10rpx;
    color: #fff;
  }
 @mixin flex {
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
 		flex-direction: row;
 	}
 
 	@mixin height {
 		/* #ifndef APP-NVUE */
 		height: 100%;
 		/* #endif */
 		/* #ifdef APP-NVUE */
 		flex: 1;
 		/* #endif */
 	}
 
 	.box {
 		@include flex;
 	}
 
 	.button {
 		@include flex;
 		align-items: center;
 		justify-content: center;
 		flex: 1;
 		height: 35px;
 		margin: 0 5px;
 		border-radius: 5px;
 	}
 
 	.example-body {
 		background-color: #fff;
 		padding: 10px 0;
 	}
 
 	.button-text {
 		color: #fff;
 		font-size: 12px;
 	}
 
 	.popup-content {
 		@include flex;
 		align-items: center;
 		justify-content: center;
 		padding: 15px;
 		height: 50px;
 		background-color: #fff;
 	}
 
 	.popup-height {
 		@include height;
 		width: 200px;
 	}
 
 	.text {
 		font-size: 12px;
 		color: #333;
 	}
 
 	.popup-success {
 		color: #fff;
 		background-color: #e1f3d8;
 	}
 
 	.popup-warn {
 		color: #fff;
 		background-color: #faecd8;
 	}
 
 	.popup-error {
 		color: #fff;
 		background-color: #fde2e2;
 	}
 
 	.popup-info {
 		color: #fff;
 		background-color: #f2f6fc;
 	}
 
 	.success-text {
 		color: #09bb07;
 	}
 
 	.warn-text {
 		color: #e6a23c;
 	}
 
 	.error-text {
 		color: #f56c6c;
 	}
 
 	.info-text {
 		color: #909399;
 	}
 
 	.dialog,
 	.share {
 		/* #ifndef APP-NVUE */
 		display: flex;
 		/* #endif */
 		flex-direction: column;
 	}
 
 	.dialog-box {
 		padding: 10px;
 	}
 
 	.dialog .button,
 	.share .button {
 		/* #ifndef APP-NVUE */
 		width: 100%;
 		/* #endif */
 		margin: 0;
 		margin-top: 10px;
 		padding: 3px 0;
 		flex: 1;
 	}
 
 	.dialog-text {
 		font-size: 14px;
 		color: #333;
 	}
</style>